<template>
  <view>
    <view class="userInfo">
      <view class="userInfo-item">
        <text>头像</text>
        <image v-if="!userImg" src="../../static/icon/user.png" mode=""></image>
        <image v-else :src="userImg" mode=""></image>
        <view class="iconfont icon-xiangyoujiantou" @click="uploadImage"></view>
      </view>
      <view class="userInfo-item">
        <text>名字</text>
        <input type="text" v-model="userInfo.real_name" placeholder="薛ty" />
      </view>
      <view class="userInfo-item">
        <text>手机号</text>
        <input type="text" v-model="userInfo.phoneNum" :placeholder="userInfo.phoneNum" />
      </view>
      <view class="userInfo-item">
        <text>学号</text>
        <input type="text" v-model="userInfo.studentNum" :placeholder="userInfo.studentNum" />
      </view>
    </view>
    <view class="footer">
      <view class="footer-item" @click="goAddress">
        <view class="iconfont icon-ditu_dingwei"></view>
        <text class="footer-itemTitle">我的地址</text>
        <view class="iconfont icon-xiangyoujiantou"></view>
      </view>
      <view class="footer-item" @click="goPassword">
        <view class="iconfont icon-xiugaimima"></view>
        <text class="footer-itemTitle">修改密码</text>
        <view class="iconfont icon-xiangyoujiantou"></view>
      </view>
    </view>
    <button class="save" @click="save">保存修改</button>
  </view>
</template>

<script>
  import {
    uploadUserImg,
    uploadUserName,
    getUserInfo
  } from '../../request/api.js'
  export default {
    data() {
      return {
        userInfo: '',
        userImg: ''
      }
    },
    onShow() {
      // 更新用户数据
      this.getUserInfo()
      this.getUserImg()
    },
    methods: {
      // 本地获取用户数据
      getUserInfo() {
        if (uni.getStorageSync('userInfo')) {
          // console.log(uni.getStorageSync('userInfo'))
          this.userInfo = uni.getStorageSync('userInfo')
          // console.log(this.userInfo)
        }
      },
      // 获取头像信息
      getUserImg() {
        if (uni.getStorageSync('userImg')) {
          // console.log(uni.getStorageSync('userImg'))
          this.userImg = uni.getStorageSync('userImg')
          // console.log(this.userImg)
        }
      },
      goAddress() {
        uni.navigateTo({
          url: '/pages/address/address'
        })
      },
      goPassword() {
        uni.navigateTo({
          url: '/pages/setPassword/setPassword'
        })
      },
      // 上传图片
      uploadImage() {
        uni.chooseImage({
          count: 1, // 允许选择的图片数量，这里设为1张，可按需调整
          sizeType: ['original', 'compressed'], // 可以选择原图或者压缩图
          sourceType: ['album', 'camera'], // 可以从相册或者相机选择图片
          success: (res) => {
            // 获取选择的图片临时文件路径
            const tempFilePaths = res.tempFilePaths;
            if (tempFilePaths.length > 0) {
              // 将临时文件路径赋值给userImg，实现图片回显
              this.userImg = tempFilePaths[0];
              // console.log(this.userImg)
            }
            // 向后端发送更新图片地址
            uni.uploadFile({
              url: 'http://8.140.198.52:8001/common/uploadFile',
              header: {
                Authorization: uni.getStorageSync('token')
              },
              filePath: this.userImg,
              name: 'file',
              success: (res) => {
                // console.log(res)
                this.userImg = res.data
                // console.log('userImg', this.userImg);
                uni.setStorageSync('userImg', this.userImg)
              },
              fail: (err) => {
                console.log("图片上传失败1:", err);
              }
            });
          },
          fail: (err) => {
            console.log("图片上传失败2:", err);
          }
        });
      },
      // 保存按钮
      save() {
        // 用户修改昵称
        const user = {
          id: this.userInfo.id,
          real_name: this.userInfo.real_name,
          phoneNum: this.userInfo.phoneNum,
          studentNum: this.userInfo.studentNum
        }
        // console.log(user)
        uploadUserName(user).then((res) => {
          getUserInfo(user.id).then((res) => {
            console.log('获取用户信息成功', res)
            uni.setStorageSync('userInfo', res.data)
            uni.showToast({
              icon: 'success',
              title: '修改成功'
            })
          }).catch((err) => {
            console.log('获取用户信息失败', err);
          })
        }).catch((err) => {
          console.log(err)
        })

        setTimeout(() => {
          uni.switchTab({
            url: '/pages/my/my'
          })
        }, 2000)
      }
    }
  }
</script>

<style>
  page {
    background-color: #f2f2f2;
  }

  .userInfo-item {
    width: 100%;
    height: 160rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .userInfo-item image {
    width: 80rpx;
    height: 70rpx;
    /* margin-left: 100rpx; */
    margin-right: -900rpx;
  }

  .userInfo-item text {
    margin-left: 40rpx;
  }

  .userInfo-item input {
    text-align: right;
    padding-right: 40rpx;
  }

  .userInfo-item .icon-xiangyoujiantou {
    margin-right: 30rpx;
  }

  .online1 {
    margin-right: 30rpx;
  }

  .footer-item {
    width: 100%;
    height: 80rpx;
    margin: 20rpx auto;
    padding: 0 30rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .footer-item text {
    margin-left: 16rpx;
  }

  .icon-xiangyoujiantou {
    margin-left: 480rpx;
  }

  .save {
    width: 90%;
    border-radius: 100rpx;
    background: #0f68d0;
    color: #fff;
    margin-top: 100rpx;
  }
</style>